<template>
  <q-page>
    <div class="container">
      <div class="row q-col-gutter-md">
        <div class="col-12">
          <q-option-group v-model="cities"
                          inline
                          toggle-color="primary"
                          type="checkbox"
                          :options="Array.isArray(cityList) ? cityList.map(i => {
                            return { label: i, value: i }
                          }) : []" />
        </div>
        <div class="col-12">
          <div id="whole-renting-house-average-price-chart" style="width: 100%; height: 100%; min-height: 350px" />
        </div>
      </div>
    </div>
  </q-page>
</template>

<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api';
import * as echarts from 'echarts';
import { WholeRentingHouseAveragePrice, WholeRentingHouseAveragePriceAPI } from 'src/lib/api/statistic/WholeRentingHouseAveragePrice';
import { EChartsType } from 'echarts';

export default defineComponent({
  name: 'WholeRentingHouseAveragePrice',
  setup() {
    const chart = ref<EChartsType>();
    const listData = ref<WholeRentingHouseAveragePrice[]>();
    const cities = ref<string[]>([]);
    const cityList = ref<string[]>([]);
    const xAxis = ref<{ data: string[] }>({
      data: []
    });
    const series = ref<{ name: string, type: string, data: number[] }>({
      name: '平均价格',
      type: 'bar',
      data: []
    });
    return { chart, listData, cities, cityList, xAxis, series };
  },
  watch: {
    cities: function (newVal, oldVal) {
      if (this.cities.length === 0) {
        this.cities = oldVal;
      }
      if (this.listData) {
        const filteredData: WholeRentingHouseAveragePrice[] =
          this.listData.map(i => this.cities.includes(i.city) ? i : null)
            .filter(i => i) as WholeRentingHouseAveragePrice[];
        this.updateChart(
          filteredData.map(i => `${i.city} ${i.district}`),
          filteredData.map(i => i.average_price));
      }
    }
  },
  methods: {
    initWholeRentingHouseAveragePriceChart: async function() {
      const chartElement = document.getElementById('whole-renting-house-average-price-chart');
      if (chartElement) {
        const chart = echarts.init(chartElement);
        this.chart = chart;
        chart.showLoading();
        const listData = await WholeRentingHouseAveragePriceAPI.list();
        this.listData = listData;
        this.cityList = Array.from(new Set(listData.map(i => i.city)));
        this.cities = Array.from(new Set(listData.map(i => i.city)));
        chart.hideLoading();
        this.updateChart(listData.map(i => `${i.city} ${i.district}`), listData.map(i => i.average_price));
      }
    },
    updateChart(xAxisData: string[], seriesData: number[]): void {
      if (this.chart) {
        this.chart.setOption({
          title: {
            text: '全国整租房平均价格统计'
          },
          tooltip: {},
          legend: {
            data: ['平均价格']
          },
          xAxis: {
            data: xAxisData
          },
          yAxis: {},
          series: {
            name: '平均价格',
            type: 'bar',
            data: seriesData
          }
        });
      }
    }
  },
  mounted: async function() {
    await this.initWholeRentingHouseAveragePriceChart();
  }
});
</script>

<style scoped>

</style>
